﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:replace="main/public :: #public_head">
</head>
<body>
<!--头部-->
<header class="publicHeader" th:replace="main/public :: #public_header">

</header>
<!--时间-->
<section class="publicTime" th:replace="main/public :: #public_time">

</section>
<!--主体内容-->
<section class="publicMian ">
    <div class="left" th:replace="main/public :: #public_left(activeUri='pwd')">
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>密码修改页面</span>
        </div>
        <div class="providerAdd">
            <form id="pwdForm" th:action="@{/user/pwd}" action="#"  method="post">
                <!--div的class 为error是验证错误，ok是验证成功-->
                <div class="">
                    <label for="oldPassword">旧密码：</label>
                    <input type="password"  id="oldPassword" autofocus="autofocus" required/>
                    <span id="pwdText">*请输入原密码</span>
                </div>
                <div>
                    <label for="newPassword">新密码：</label>
                    <input type="password"  id="newPassword" required/>
                    <span id="newPwdText">*请输入新密码</span>
                </div>
                <div>
                    <label for="reNewPassword">确认新密码：</label>
                    <input type="password"  name="password" id="reNewPassword" required/>
                    <span id="reNewPwdText" >*请输入新确认密码，保证和新密码一致</span>
                </div>
                <div class="providerAddBtn">
                    <!--<a href="#">保存</a>-->
                    <input type="button" value="保存" id="save"/>
                </div>
            </form>
        </div>
    </div>
</section>

<footer class="footer" th:replace="main/public :: #public_footer">
</footer>
<script th:src="@{/webjars/jquery/3.3.1/jquery.js}" ></script>

<script type="text/javascript" th:inline="javascript">
    // 要使用thymeleaf行内表达式则上面需要使用：th:inline="javascript" 标识
    $(function () {

        var isCheck = false;
        //原密码失去焦点
        $("#oldPassword").blur(function () {
            var oldPassword = $(this).val().trim();
            if(!oldPassword) {
                $('#pwdText').css('color', 'red');
                isCheck = false;
                return ;
            }


            //theymeleaf行内表达式
            var url = [[@{/user/pwd/}]] + oldPassword;
            //异步判断密码是否正确
            $.ajax({
                url: url,
                dataType: 'json',
                method: 'GET',
                success: function (data) {
                    isCheck = data;
                    data ? $("#pwdText").replaceWith("<span id='pwdText'>*原密码正确</span>")
                        : $("#pwdText").replaceWith("<span id='pwdText' style='color: red'>*原密码错误</span>");
                },
                error: function () {
                    $('#pwdText').html("校验原密码异常");
                    isCheck = false;
                }
            });
        });

        $("#save").click(function () {

            if(isCheck) {
                if($("#newPassword").val() && $("#reNewPassword").val()
                    && $("#newPassword").val() == $("#reNewPassword").val()) {
                    $("#pwdForm").submit();
                }else{
                    $("#reNewPwdText").replaceWith("<span id='reNewPwdText' style='color: red'>*保证和新密码一致</span>");
                }
            }

        });
    });
</script>

<!--
	<script src="js/time.js"></script>
	-->
</body>
</html>